<template>
    <!-- <div class="sOverlapParent">
        <div class="sOverlap">重叠1111</div>
        <div>重叠2222</div>
    </div>

    <div>---分割线---</div>
    <div >
        <div class="sNoToNextInline">不换行111111111111111111111</div>
        <div class="sNoToNextInline">不换行22222222222222222222</div>
    </div>

    <div>---分割线---</div>
    <div>
        <div class="sNoToNextInlineBlock">不满不换行111111111111111111111</div>
        <div class="sNoToNextInlineBlock">满了另起一行22222222222222222222</div>
    </div>

    <div>---分割线---</div>
    <div class="sFloatLeftParent">
        <div class="sFloatLeft">不满不换行111111111111111111111</div>
        <div class="sFloatLeft">满了另起一行22222222222222222222</div>
    </div> -->

    <!-- 解决高度塌陷 -->
    <!-- <div class="container clearfix">
        <div class="left">左</div>
        <div class="right">右</div>
        <div class="content">内容</div>
    </div> -->
    <div class="sFlex">
        <div>11111</div>
        <div>1111222</div>
    </div>
    <div>222222222</div>
</template>
<script setup lang="ts">
/*
inline（行内元素）:
    1.使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 
    2.不能更改元素的height，width的值，大小由内容撑开. 
    3.可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行.
block（块级元素）:
    1.使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度. 
    2.能够改变元素的height，width的值. 
    3.可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果.
inline-block（融合行内于块级）:
    1.结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点.
    2.用通俗的话讲，就是不独占一行的块级元素。如图:

*/
</script>
<style>
.sOverlapParent {
    position: relative;
}

.sOverlap {
    position: absolute;
}

.sNoToNextInline {
    display: inline;
}

.sNoToNextInlineBlock {
    display: inline-block;
}

.sFloatLeftParent {
    overflow: hidden;
}

.sFloatLeft {
    float: left;
}

body {
    margin: 0;
}

.container {
    height: 400px;
    background-color: #eebefa;
}

.left {
    height: 400px;
    width: 20px;
    background-color: #f783ac;
}

.content {
    height: 400px;
    background-color: #d9480f;
}

.right {
    height: 400px;
    width: 20px;
    background-color: #c0eb75;
}

.left,
.content,
.right {
    font-size: 20px;
    line-height: 400px;
    text-align: center;
}

/* 清除浮动 */
.clearfix:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.left {
    /* 1. 左列容器开启左浮动 */
    float: left;
}

.content {
    /* 自适应元素设置 overflow 会创建一个BFC 完成自适应 */
    overflow: hidden;
}

.right {
    /* 2. 右列容器开启右浮动 */
    float: right;
}

.sFlex {
    display: flex;
}
</style>